<template>
    <menu-bar :todoList="list">
        <template v-slot:item0>
            <span @click="mearsurePoint" class="menuButton">点位测量</span>
        </template>
        <template v-slot:item1>
            <span @click="mearsureLine" class="menuButton">距离测量</span>
        </template>
        <template v-slot:item2>
            <span @click="mearsureArea" class="menuButton">面积测量</span>
        </template>
        <template v-slot:item3>
            <span @click="mearsureHeight" class="menuButton">高度测量</span>
        </template>
        <template v-slot:item4>
            <span @click="pathProj" class="menuButton">视频投影</span>
        </template>
        <template v-slot:item5>
            <span @click="view3D" class="menuButton">可视域分析</span>
        </template>
        <template v-slot:item6>
            <div>


            <span @click="setVideo" class="menuButton">
               打开视频投影
            </span>
 <video-setting v-show="enableVideoSetting"></video-setting>
             </div>
        </template>
         
    </menu-bar>
</template>
<script type="module">
import PointDraw from '@/assets/js/cesium/PointDraw'
import PolylineDraw from '@/assets/js/cesium/PolylineDraw'
import PolygonDraw from '@/assets/js/cesium/PolygonDraw'
import MenuBar from '@/components/MenuBar.vue'
import ConstValue from '@/assets/js/ConstValue'
import CesiumVideo3d from '@/assets/js/Video3d/CesiumVideo3d'
import CesiumView3d from '@/assets/js/Video3d/ViewShedStage.js'
import VideoSetting from '@/components/UI/VideoSetting.vue'
export default{
    components:{MenuBar,VideoSetting},
    data(){
        return{ 
            list: [
                '点位位置',
                '距离测量',
                '面积测量',
                '高度测量',
                '视频投影',
                '可视域分析',
                '设置视频投影'
            ],
            cvideo:undefined,
            enableVideoSetting:false,
        }
    },
    methods:{
        setVideo(){
            this.enableVideoSetting =!this.enableVideoSetting;
        },
        view3D(){
            // global.sceneUtil.loadScene(ConstValue.SCENES[2]);
            let position =new Cesium.Cartesian3.fromDegrees(120.43236,36.31430,4);
            let orientation =new Cesium.HeadingPitchRoll(-100,-12,0);
            let viewShed =new CesiumView3d(global.viewer,
            {viewPosition:position, viewHeading:-100,viewPitch:-12});

        },
        video3D(){
            // global.sceneUtil.loadScene(ConstValue.SCENES[2]);
          const option1={ // 上
            // url:
            //   "http://58.56.130.66:50036/qdyjy?port=1935&app=qdyjy&stream=xdl34",
            url:'/north.mp4',
            position:{
                x:120.432375,
                y:36.31425,
                z:6
            },
            rotation:{
                x:-11,
                y:-2,
                z:0
            },
            near: 1,
            far: 50,
            fov: 60,
          }
          const option2 ={ // 左
            // url:
            //   "http://58.56.130.66:50036/qdyjy?port=1935&app=qdyjy&stream=xdl33",
            url:'/west.mp4',
            position:{
                x:120.43246,
                y:36.31433,
                z:6,
            },
            rotation:{
                x:-15.5,
                y:-97,
                z:0
            },
            near: 1,
            far: 50,
            fov: 60,
          }
          const option3={ // 右
            // url:
            //   "http://58.56.130.66:50036/qdyjy?port=1935&app=qdyjy&stream=xdl35",
            url:'/east.mp4',
            position:{
                x:120.43246,
                y:36.31433,
                z:6,
            },
            rotation:{
                x:-19,
                y:74,
                z:0
            },
            near: 1,
            far: 50,
            fov: 60,
          }
    //   global.viewer.scene.globe.depthTestAgainstTerrain = true;
      var cvideo1 =new CesiumVideo3d(Cesium,global.viewer,option1);
      var cvideo2 =new CesiumVideo3d(Cesium,global.viewer,option2);
      var cvideo3 =new CesiumVideo3d(Cesium,global.viewer,option3);
        },
        mearsurePoint(){
            let pointDraw =new PointDraw(global.viewer,global.eventUtil);
            pointDraw.bindDrawEvent((e)=>{
                        // 添加位置信息标签
                        let cPosition =e.surfacePosition;
                        let position =e.wgs84SurfacePosition
                global.viewer.entities.add({
                    // group: _this._type + _this._name,
                    position: cPosition,
                    label: {
                        text: '经度:' + position.lng.toFixed(6) + '纬度:' + position.lat.toFixed(6),
                        font: "15px Helvetica",
                        fillColor: Cesium.Color.BLUE,
                        pixelOffset: new Cesium.Cartesian2(0.0, -20),
                    }
                });
            })
            pointDraw.start();
        },
        mearsureLine(){
            
            let polylineDraw =new PolylineDraw(global.viewer,global.eventUtil);
            polylineDraw.bindDrawEvent((positionList)=>{
                for(let i=1;i<positionList.length;i++){
                    console.log(positionList)
                    let geodesic =new Cesium.EllipsoidGeodesic();
                    let scratch =new Cesium.Cartographic();
                    geodesic.setEndPoints(Cesium.Cartographic.fromCartesian(positionList[i-1]),Cesium.Cartographic.fromCartesian(positionList[i]));
                    let labelPosition =geodesic.interpolateUsingFraction(0.5,scratch);
                    var lengthInMeters = Math.round(geodesic.surfaceDistance);
                    console.log(labelPosition)
                    global.viewer.entities.add({
                    // group: _this._type + _this._name,
                    position: Cesium.Cartographic.toCartesian(labelPosition),
                    label: {
                        text: lengthInMeters+'m',
                        font: "15px Helvetica",
                        fillColor: Cesium.Color.BLUE,
                        pixelOffset: new Cesium.Cartesian2(0.0, -20),
                    }
                });
                }
            })
            polylineDraw.start();
        },
        mearsureArea(){
            let polygonDraw =new PolygonDraw(global.viewer,global.eventUtil);
            polygonDraw.bindDrawEvent((positionList)=>{
                var polyCenter = Cesium.BoundingSphere.fromPoints(positionList).center;
                let area =global.analysis.getArea(positionList)/1000000;
                area =area.toFixed(4)
                console.log(area);
                global.viewer.entities.add({
                    // group: _this._type + _this._name,
                    position: polyCenter,
                    label: {
                        text: area+'km^2',
                        font: "15px Helvetica",
                        fillColor: Cesium.Color.BLUE,
                        pixelOffset: new Cesium.Cartesian2(0.0, -20),
                    }
                });
            })
            polygonDraw.start();
        },
        mearsureHeight(){
            let polylineDraw =new PolylineDraw(global.viewer,global.eventUtil);
            polylineDraw._clampToGround =false;
                        polylineDraw.bindDrawEvent((positionList)=>{
                for(let i=1;i<positionList.length;i++){
                    console.log(positionList)
                    let start =Cesium.Cartographic.fromCartesian(positionList[i-1]);
                    let end =Cesium.Cartographic.fromCartesian(positionList[i]);
                    let height =start.height-end.height;
                     let geodesic =new Cesium.EllipsoidGeodesic();
                    let scratch =new Cesium.Cartographic();
                    geodesic.setEndPoints(start,end);
                    let labelPosition =geodesic.interpolateUsingFraction(1,scratch);
                    global.viewer.entities.add({    
                    // group: _this._type + _this._name,
                    position: positionList[0],
                    label: {
                        text: height.toFixed(4)+'m',
                        font: "15px Helvetica",
                        fillColor: Cesium.Color.BLUE,
                        pixelOffset: new Cesium.Cartesian2(20, 20),
                    }
                });
                }
            })
            polylineDraw.start();
        },
                        pathProj() {
                // 设置路径在二维像素平面的起点坐标和终点坐标
                // let pick1 = new Cesium.Cartesian2(890, 341)
                // let pick2 = new Cesium.Cartesian2(1170, 515)
                // // 让相机发出两条射线并拾取到三维坐标
                // console.log(this.cvideo.projCamera)
                // let ray1 = this.cvideo.projCamera.getPickRay(pick1)
                // let ray2 = this.cvideo.projCamera.getPickRay(pick2)
                // //Get the first intersection point of a ray and an ellipsoid. 
                // let ellipsoid = viewer.scene.globe.ellipsoid;
                // var intersection1 = Cesium.IntersectionTests.rayEllipsoid(ray1, ellipsoid);
                // var intersection2 = Cesium.IntersectionTests.rayEllipsoid(ray2, ellipsoid);
                // var start = Cesium.Ray.getPoint(ray1, intersection1.start);
                // var end = Cesium.Ray.getPoint(ray2, intersection2.start);
                // console.log(start)
                // let start = viewer.scene.globe.pick(viewer.camera.getPickRay(pick1), viewer.scene);
                // let end = viewer.scene.globe.pick(viewer.camera.getPickRay(pick2), viewer.scene);
                // 在三维场景中创建轨迹线
                let start =new Cesium.Cartesian3(-2.60625977e+06,4.43652701e+06,3.75635312e+06)
                let end =new Cesium.Cartesian3(-2.60626340e+06,4.43652305e+06,3.75635483e+06)
                
                // this.path = viewer.entities.add({
                //     polyline: {
                //         positions: [start, end],
                //         width: 5,
                //         material: Cesium.Color.RED,
                //         clampToGround: true,
                //     },
                // });
                const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
const annotations = viewer.scene.primitives.add(new Cesium.LabelCollection());

                var dataSource = new Cesium.CzmlDataSource();
                viewer.dataSources.add(dataSource);
                dataSource.process('/path.czml').then(()=>{
                    handler.setInputAction(function (movement) {
  const feature = viewer.scene.pick(movement.position);
  if (!Cesium.defined(feature)) {
    return;
  }
                        if (viewer.scene.pickPositionSupported) {
    const cartesian = viewer.scene.pickPosition(movement.position);

      const height = "鲁BH8755";

      annotations.add({
        position: cartesian,
        text: height,
        showBackground: true,
        font: "14px monospace",
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      });
    }
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)



                    viewer.trackedEntity = dataSource.entities.getById("CesiumMilkTruck");
                }).otherwise((error)=>{
                    window.alert(error);
                })
            },
    }
}
</script>
<style scoped>

</style>    